<template>
  <div>
    <basic-container>
      <!--列表页面-->
      <div>
        <div style="margin-bottom: 10px;">
          <el-button type="primary" @click="newBtn">新增</el-button>
          <!--<el-button type="primary" @click="copyBtn">复制</el-button>-->
        </div>
        <el-table :data="nameTableData" v-loading="loadingFrom">
          <el-table-column prop="templateName" label="模板名称" align="center"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
          <el-table-column prop="createUserName" label="创建人" align="center"></el-table-column>
          <el-table-column prop="isEffective" label="有效性" align="center">
            <template slot-scope="scope">
              <i v-if="scope.row.isEffective == 1" style="color: green;" class="el-icon-circle-check"></i>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="edit(scope.row)">编辑</el-button>
              <el-button type="text" @click="delBtn(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!--流程图-->
      <el-dialog
        :title="dialogtitle"
        :visible.sync="mbstepsDialogVisible"
        width="80%"
      >
        <!--流程图 top form-->
        <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="120px" style="display:flex" :inline="true">
          <el-form-item label="模板名称" prop="templateName" style="width:22%">
            <el-input v-model="ruleForm.templateName"></el-input>
          </el-form-item>
          <el-form-item style="width:22%">
            <el-button type="primary" plain @click="submitForm('ruleForm')">确定</el-button>
          </el-form-item>
        </el-form>

        <div style="display: block;margin-top: -54px;float: right;" v-if="tableData.length>1">
          <el-button type="primary" plain @click="saveBtn" v-loading.fullscreen.lock="fullscreenLoading2">模板保存</el-button>
          <!-- <el-button type="primary" plain @click="copyBtnDtail" v-loading.fullscreen.lock="fullscreenLoading2">复制</el-button>-->
        </div>

        <!--流程图 content-->
        <div  v-loading="loading">
          <div class="bg_tiao" v-if="tableData.length>1"></div>
          <div style="display:flex; justify-content:space-between ;width:100%;z-index: 8; position: sticky;" v-if="tableData.length>1">
            <div class="text_dh">
              <div style="color:#0762c3;margin:0 27px">开始</div>
              <img class="imgs" src="./start.png" alt="" @click="editmbsteps('该节点无配置')">
            </div>
            <div class="text_dh">
              <div style="color:#0762c3;margin:0 9px">合同创建</div>
              <div class="chenck_active" @click="editmbsteps('该节点无配置')"><i class="el-icon-check checked2"></i></div>
            </div>
            <div class="text_dh">
              <div style="color:#0762c3;margin:0 9px">指标拟定</div>
              <div>
                <div class="chenck_active" v-if="from1.isjump" @click="editmbsteps('该节点无配置')"><i class="el-icon-check checked2"></i></div>
                <div  v-else class="point" @click="editmbsteps('该节点无配置')"></div>
              </div>
              <el-checkbox v-model="from1.isjump" @change="valueChange(from1)">启用</el-checkbox>
            </div>
            <div class="text_dh">
              <div style="color:#0762c3;margin:0 27px">汇总</div>
              <div v-if="from2.isauto == 0" class="chenck_active" @click="editmbsteps('汇总')"><i class="el-icon-check checked2"></i></div>
              <div v-else @click="editmbsteps('汇总')" class="chenck_active2"><i class="el-icon-check checked"></i></div>
            </div>
            <div class="text_dh">
              <div style="color:#0762c3;margin:0 9px">文本审核</div>
              <div v-if="from2.isauto == 0" class="chenck_active" @click="editmbsteps('该节点无配置')"><i class="el-icon-check checked2"></i></div>
              <div v-else @click="editmbsteps('文本审核')" class="chenck_active2"><i class="el-icon-check checked"></i></div>
            </div>
            <div class="text_dh">
              <div style="color:#0762c3;margin:0 9px">发起签订</div>
              <div class="chenck_active" @click="editmbsteps('该节点无配置')"><i class="el-icon-check checked2"></i></div>
            </div>
            <div class="text_dh">
              <div style="color:#0762c3">受约人确认</div>
              <div>
                <div class="chenck_active" v-if="from4.isjump" @click="editmbsteps('该节点无配置')"><i class="el-icon-check checked2"></i></div>
                <div v-else class="point" @click="editmbsteps('该节点无配置')"></div>
              </div>
              <el-checkbox v-model="from4.isjump" @change="valueChange(from4)">启用</el-checkbox>
            </div>
            <div class="text_dh">
              <div style="color:#0762c3">办公室审核</div>
              <div>
                <div  class="chenck_active" v-if="from5.isjump" @click="editmbsteps('该节点无配置')"><i class="el-icon-check checked2"></i></div>
                <div v-else class="point" @click="editmbsteps('该节点无配置')"></div>
              </div>
              <el-checkbox v-model="from5.isjump" :disabled ="disabled" @change="valueChange(from5)">启用</el-checkbox>
            </div>
            <div class="text_dh">
              <div style="color:#0762c3;">发约人确认</div>
              <div>
                <div  class="chenck_active" v-if="from6.isjump" @click="editmbsteps('该节点无配置')"><i class="el-icon-check checked2"></i></div>
                <div v-else class="point" @click="editmbsteps('该节点无配置')"></div>
              </div>
              <el-checkbox v-model="from6.isjump" @change="valueChange(from6)">启用</el-checkbox>
            </div>
            <div class="text_dh">
              <div style="color:#0762c3;margin:0 27px;">归档</div>
              <div class="chenck_active" @click="editmbsteps('该节点无配置')"><i class="el-icon-check checked2"></i></div>
            </div>
            <div class="text_dh">
              <div style="color:#0762c3;margin:0 27px;">结束</div>
              <img class="imgs" src="./end.png" alt="" @click="editmbsteps('该节点无配置')">
            </div>
          </div>
          <div class="tiao_lc" style="margin-top: 20px; margin-bottom: 20px;" v-if="showType == '汇总'||showType == '结果汇总'||showType == '文本审核'||showType == '领导审核'||showType=='请点击节点进行配置'||showType == '该节点无配置'">
            {{showType}}
          </div>
          <div class="mb_bottom"  v-if="tableData.length>1">
            <el-form ref="form" :model="from2" label-width="170px" :inline="true"  class="form-inline" v-if="showType == '汇总'||showType == '结果汇总'||showType == '文本审核'||showType == '领导审核'">
              <el-form-item label="该节点是否自动执行:" v-if="showType == '汇总'">
                <el-select v-model="from2.isauto" placeholder="请选择" @change="valueChange(from2)">
                  <el-option
                    v-for="item in options"
                    :label="item.label"
                    :key="item.value"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="文本审核审批类型:"  v-if="showType == '文本审核'">
                <el-select v-model="from3.tagType" placeholder="请选择" @change="valueChange(from3)">
                  <el-option
                    v-for="item in wboptions"
                    :label="item.label"
                    :key="item.value"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="文本审核审批人员："  v-if="showType == '文本审核'">
                <el-button plain type="primary"  @click="choosePer(from3)">选择</el-button>
              </el-form-item>
              <el-form-item label="该节点是否自动执行:" v-if="showType == '结果汇总'">
                <el-select v-model="from7.isauto" placeholder="请选择" @change="valueChange(from7)">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="领导审核审批类型:" v-if="showType == '领导审核'">
                <el-select v-model="from8.tagType" placeholder="请选择" @change="valueChange(from8)">
                  <el-option
                    v-for="item in wboptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="领导审核审批人员：" v-if="showType == '领导审核'">
                <el-button plain type="primary"  @click="choosePer(from8)">选择</el-button>
              </el-form-item>
            </el-form>
            <div class="text_dh" v-else>
              <svg width="150" viewBox="0 0 79 86" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="linearGradient-1-1" x1="38.8503086%" y1="0%" x2="61.1496914%" y2="100%"><stop stop-color="#FCFCFD" offset="0%"></stop><stop stop-color="#EEEFF3" offset="100%"></stop></linearGradient><linearGradient id="linearGradient-2-1" x1="0%" y1="9.5%" x2="100%" y2="90.5%"><stop stop-color="#FCFCFD" offset="0%"></stop><stop stop-color="#E9EBEF" offset="100%"></stop></linearGradient><rect id="path-3-1" x="0" y="0" width="17" height="36"></rect></defs><g id="Illustrations" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="B-type" transform="translate(-1268.000000, -535.000000)"><g id="Group-2" transform="translate(1268.000000, 535.000000)"><path id="Oval-Copy-2" d="M39.5,86 C61.3152476,86 79,83.9106622 79,81.3333333 C79,78.7560045 57.3152476,78 35.5,78 C13.6847524,78 0,78.7560045 0,81.3333333 C0,83.9106622 17.6847524,86 39.5,86 Z" fill="#F7F8FC"></path><polygon id="Rectangle-Copy-14" fill="#E5E7E9" transform="translate(27.500000, 51.500000) scale(1, -1) translate(-27.500000, -51.500000) " points="13 58 53 58 42 45 2 45"></polygon><g id="Group-Copy" transform="translate(34.500000, 31.500000) scale(-1, 1) rotate(-25.000000) translate(-34.500000, -31.500000) translate(7.000000, 10.000000)"><polygon id="Rectangle-Copy-10" fill="#E5E7E9" transform="translate(11.500000, 5.000000) scale(1, -1) translate(-11.500000, -5.000000) " points="2.84078316e-14 3 18 3 23 7 5 7"></polygon><polygon id="Rectangle-Copy-11" fill="#EDEEF2" points="-3.69149156e-15 7 38 7 38 43 -3.69149156e-15 43"></polygon><rect id="Rectangle-Copy-12" fill="url(#linearGradient-1-1)" transform="translate(46.500000, 25.000000) scale(-1, 1) translate(-46.500000, -25.000000) " x="38" y="7" width="17" height="36"></rect><polygon id="Rectangle-Copy-13" fill="#F8F9FB" transform="translate(39.500000, 3.500000) scale(-1, 1) translate(-39.500000, -3.500000) " points="24 7 41 7 55 -3.63806207e-12 38 -3.63806207e-12"></polygon></g><rect id="Rectangle-Copy-15" fill="url(#linearGradient-2-1)" x="13" y="45" width="40" height="36"></rect><g id="Rectangle-Copy-17" transform="translate(53.000000, 45.000000)"><mask id="mask-4-1" fill="white"><use xlink:href="#path-3-1"></use></mask><use id="Mask" fill="#E0E3E9" transform="translate(8.500000, 18.000000) scale(-1, 1) translate(-8.500000, -18.000000) " xlink:href="#path-3-1"></use><polygon id="Rectangle-Copy" fill="#D5D7DE" mask="url(#mask-4-1)" transform="translate(12.000000, 9.000000) scale(-1, 1) translate(-12.000000, -9.000000) " points="7 0 24 0 20 18 -1.70530257e-13 16"></polygon></g><polygon id="Rectangle-Copy-18" fill="#F8F9FB" transform="translate(66.000000, 51.500000) scale(-1, 1) translate(-66.000000, -51.500000) " points="62 45 79 45 70 58 53 58"></polygon></g></g></g></svg>
              <span style="margin: 0;-size: 14px;color: #909399;">暂无节点配置</span>
            </div>
            <div class="per" v-if="showType == '文本审核'||showType == '领导审核'">
              <span v-for="item in perList" :key="item.userName">{{item.userName}}、</span>
            </div>
          </div>
        </div>

      </el-dialog>

    </basic-container>
  </div>
</template>

<script>
    import {getTempList,tempage,saveTemplateName,isExsitTemplateName,
        saveTemplatehang,effective,deleteBatchtem,copyTemplateMainAndDetail } from "@/api/dailyExamine/eventExamine/eventTaskTemplate.js";
    export default {

        data() {
            return {
                nameTableData:[],
                mbstepsDialogVisible:false,
                id:"",
                showType:"",
                from1:{},
                from2:{},
                from3:{},
                from4:{},
                from5:{},
                from6:{},
                from7:{},
                from8:{},
                from9:{},
                from10:{},
                disabled:false,
                options:[
                    {label:'是',value:"1"},
                    {label:'否',value:"0"},
                ],
                wboptions:[
                    {label:'会签',value:"1"},
                    {label:'顺序签',value:"0"},
                ],
                dialogtitle:"",
                ruleForm:{
                    templateName:"",
                },
                rules:{
                    templateName: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                    ],
                },
                loading:false,
                tableData:[],
                perList:[],
            }
        },
        created(){
            this.getemNameList();
            this.from1 = {};
            this.from2 = {};
            this.from3 = {};
            this.from4 = {};
            this.from5 = {};
            this.from6 = {};
            this.from7 = {};
            this.from8 = {};
            this.from9 = {};
            this.from10= {};
            this.id = "";
        },
        methods:{
            //获取模板列表
            getemNameList(){
                this.loadingFrom = true;
                tempage({
                    tagName:"业绩合同"
                }).then((res)=>{
                    this.loadingFrom = false;
                    this.nameTableData = res.data.data.records;
                    this.showType = "请点击节点进行配置"
                })
            },
            newBtn(){
                this.dialogtitle = "新增"
                this.tableData = [];
                this.id = "";
                this.from1 = {};
                this.from2 = {};
                this.from3 = {};
                this.from4 = {};
                this.from5 = {};
                this.from6 = {};
                this.from7 = {};
                this.from8 = {};
                this.from9 = {};
                this.from10= {};
                this.ruleForm = {};
                this.mbstepsDialogVisible = true;
                this.showType = "";
            },
            // 新增模板
            submitForm(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        isExsitTemplateName({
                            templateName:this.ruleForm.templateName,
                            tagName:"业绩合同"
                        }).then((res)=>{
                            if(!res.data.data.flag){
                                saveTemplateName({
                                    templateName:this.ruleForm.templateName,
                                    id:this.id,
                                    tagName:"业绩合同"
                                }).then((res)=>{
                                    console.log(res) ;
                                    this.id = res.data.data.id;
                                    this.fngetTempList(res.data.data);
                                    this.getemNameList();
                                })
                            }else{
                                this.$message.warning("模板名称已存在")
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            // 编辑
            fngetTempList(){
                var params ={
                    mainId:this.id
                }
                this.loading = true;
                getTempList(params).then((res)=>{
                    console.log(res)
                    this.tableData = res.data.data;
                    this.from1 = res.data.data[0];
                    if(this.from1.isjump == 'false'){
                        this.from1.isjump = true;
                    }else{
                        this.from1.isjump = false;
                    }
                    this.from2 = res.data.data[1];
                    this.from3 = res.data.data[2];
                    this.from4 = res.data.data[3];
                    if(this.from4.isjump == 'false'){
                        this.from4.isjump = true
                    }else{
                        this.disabled = true;
                        this.from4.isjump = false;
                    }
                    this.from5 = res.data.data[4];
                    if(this.from5.isjump == 'false'){
                        this.from5.isjump = true;
                    }else{
                        this.from5.isjump = false;
                    }
                    this.from6 = res.data.data[5];
                    if(this.from6.isjump == 'false'){
                        this.from6.isjump = true
                    }else{
                        this.from6.isjump = false;
                    }
                    this.from7 = res.data.data[6];
                    this.from8 = res.data.data[7];
                    this.from9 = res.data.data[8];
                    if(this.from9.isjump == 'false'){
                        this.from9.isjump = true;
                    }else{
                        this.from9.isjump = false;
                    }
                    this.from10= res.data.data[9];
                    if(this.from10.isjump == 'false'){
                        this.from10.isjump = true;
                    }else{
                        this.from10.isjump = false;
                    }
                    this.mbstepsDialogVisible = true;
                    this.loading = false;
                }).catch(()=>{
                    this.loading = false;
                })
            },
            // 节点编辑
            editmbsteps(e){
                this.showType = e;
                if(e == '文本审核'){
                    this.perList = JSON.parse(this.from3.userjson).reverse()
                }else if('领导审核'){
                    this.perList = JSON.parse(this.from8.userjson).reverse()
                }
            },
            //启用
            valueChange(e){
                console.log(e)
                var row = {};
                if(e.stepName == '指标拟定'){
                    row = this.from1;
                }else if(e.stepName == '汇总'){
                    row = this.from2;
                }else if(e.stepName == '文本审核'){
                    row = this.from3;
                }else if(e.stepName == '受约人确认'){
                    row = this.from4;
                    if(this.from4.isjump == false){
                        this.disabled = true;
                        this.from5.isjump = true;
                        saveTemplatehang(this.from5).then((res)=>{
                            this.fngetTempList()
                        })
                    }else{
                        this.disabled = false;
                    }
                }else if(e.stepName == '合同发起人确认'){
                    row = this.from5;
                }else if(e.stepName == '发约人确认'){
                    row = this.from6;
                }else if(e.stepName == '结果汇总'){
                    row = this.from7;
                }else if(e.stepName == '领导审核'){
                    row = this.from8;
                }else if(e.stepName == '发起预填报'){
                    row = this.from9;
                }else if(e.stepName == '发起填报'){
                    row = this.from10;
                }
                if(row.isjump == false){
                    row.isjump = true;
                }else{
                    row.isjump = false;
                }
                this.savetem(row)
            },
            savetem(row){
                saveTemplatehang(row).then((res)=>{
                    this.$message.closeAll();
                    this.$message.success(row.stepName + '保存成功');
                    this.fngetTempList()
                }).catch(res=>{
                })
            },
            // 模板提交至有效
            saveBtn(){
                var params = {
                    isEffective:1,
                    id:this.id,
                    tagName:"业绩合同"
                }
                if(this.from2.isauto == null){
                    this.$message.warning("请完成“汇总”节点的配置")
                }else if((this.from3.tagType == null  || JSON.parse(this.from3.userjson).length==0)&&this.from2.isauto == '1'){
                    this.$message.warning("请完成“文本审核”节点的配置")
                }else if(this.from7.isauto == null){
                    this.$message.warning("请完成“结果汇总”节点的配置")
                }else if((this.from8.tagType == null || JSON.parse(this.from8.userjson).length==0)&&this.from7.isauto == '1'){
                    this.$message.warning("请完成“领导审核”节点的配置")
                }else if(this.from9.isjump == false && this.from10.isjump == false){
                    this.$message.warning("请勾选“发起预填报”或“正式填报”")
                }else{
                    this.fullscreenLoading2 = true;
                    saveTemplateName(params).then((res)=>{
                        this.$message.success('提交成功');
                        this.fullscreenLoading2 = false;
                        this.getemNameList();
                        this.mbstepsDialogVisible = false;
                    }).catch(res=>{
                        this.fullscreenLoading2 = false;
                    })
                }
            },
        }
    }

</script>
<style scoped>
  .tiao_lc{
    width: 100%;
    background: #eeeeee;
    padding: 10px;
    color:#0762c3;
  }
  .text_dh{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .mb_bottom{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 230px;
  }
  .bg_tiao{
    width: 100%;
    background: #a9c6ea;
    height: 4px;
    top: 45px;
    position: relative;
    z-index: 2;
  }
  .bg_tiaoTwo{
    width: 69%;
    background: #a9c6ea;
    height: 4px;
    top: 65px;
    position: relative;
    z-index: 2;
  }
  .point{
    width: 31px;
    height: 31px;
    margin: 0 3px 6px 3px;
    border-radius: 50%;
    background: #dbe2f2;
    box-shadow: 4px 4px 6px #888888;
  }
  .chenck_active{
    width: 31px;
    height: 31px;
    margin: 0 3px 6px 3px;
    border-radius: 50%;
    background: #0a66c2;
    box-shadow: 4px 4px 6px #888888;
    text-align: center;
  }
  .chenck_active2{
    width: 31px;
    height: 31px;
    margin: 0 3px 6px 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 4px 4px 6px #888888;
    text-align: center;
  }
  .imgs{
    width: 31px;
    height: 31px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 4px 4px 6px #888888;
  }
  .checked{
    font-size:20px;
    border-radius: 50%;
    color: #0a66c2;
    line-height: 31px;
    background:#fff;
  }
  .checked2{
    color:#fff;
    font-size:20px;
    line-height: 31px;
    text-align: center;
    background: #0a66c2;
    border-radius: 50%;
  }
  .per{
    width: 80%;
    height: 84px;
    border-radius: 5px;
    border: 2px #ededf1 solid;
    padding: 20px;
  }
</style>
